<template>
  <picker
    @change="bindPickerChange"
    :value="modelValue"
    mode="date"
    :start="start"
    :end="end"
  >
    <view
      class="h-10 relative rounded-full border border-[rgba(0,0,0,0.16)] flex items-center px-3 acitve:border-primary active:border-primary transition-[border-color] duration-[0.3s]"
    >
      {{ modelValue || placeholder }}
      <img src="./date.svg" alt="" class="absolute w-4 h-4 right-3 block" />
    </view>
  </picker>
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请选择",
    },
    modelValue: {
      type: [String, Number],
    },
    start: {
      type: String,
    },
    end: {
      type: String,
    },
  },
  methods: {
    bindPickerChange: function (e) {
      this.$emit("update:modelValue", e.detail.value);
    },
  },
};
</script>
